<template>
  <div class="score-analysis" ref="fullscreenElement">
    <div class="header">
      <h3>{{ title }}</h3>
      <p>
        <b @click="toggleFullscreen"><img src="../../assets/image/qp.png" alt="">{{ isFullscreen ? "退出全屏" : "全屏(F11)"
        }}</b>
        <!-- <em @click="addwebbard">进入讲评</em> -->
      </p>
    </div>
    <div style="height:48px;"></div>
    <!-- 固定在顶部的查询条件 -->
    <!-- <div class="query-section">
        <div class="query-form">
          <el-form :inline="true">
            <el-form-item label="考试ID">
              <el-input v-model="examId" placeholder="请输入考试ID" />
            </el-form-item>
            <el-form-item label="班级ID">
              <el-input v-model="classId" placeholder="请输入班级ID" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div> -->
    <!-- 内容区域，添加上边距以避免被固定查询条件遮挡 -->
    <!-- 成绩概览 -->
    <h3 class="scoreStateTitle">年级总览</h3>
    <div class="content-section">
      <score-overview :subjectId="subjectid" :gradeId="gradeid" :classIds="classids" :startTime="startTime"
        :endTime='endTime' ref="scoreOverviewRef" />

      <!-- 分数分布 -->
      <h3 class="scoreStateTitle" style="margin:0;">年级共性问题</h3>
      <score-distribution :exam-id="examId" :class-id="classId" ref="scoreDistributionRef" />

      <!-- 作业分析 -->
      <h3 class="scoreStateTitle" style="margin:0;">教育质量趋势</h3>
      <homework-analysis :exam-id="examId" :class-id="classId" ref="homeworkAnalysisRef"
        @load-error="handleLoadError" />
    </div>
    <div class="leftbarcontent">
      <div class="zdbutton" @click="toolhidden" :class="{ 'zdbutton-visible': !isToolShowVisible }"></div>
      <ul class="leftbar" :class="{ 'toolshow-visible': isToolShowVisible }">
        <li v-for="(group, index) in menuGroups" :key="index">
          <template v-if="group.title">
            <span>{{ group.title }}</span>
          </template>
          <a v-for="(item, i) in group.items" :key="i" href="#" @click.prevent="selectMenuItem(item.id)"
            :class="{ 'active': selectedItem === item.id }">
            {{ item.text }}
          </a>
        </li>
      </ul>
      <!-- <ul class="leftbar" :class="{ 'toolshow-visible': isToolShowVisible }">
              <li>
                  <span>年级总览</span>
                  <a href="#" @click="scrollToSection('#High-frequency-incorrect-questions')">年级五率对比</a>
                  <a href="#" @click="scrollToSection('#Homework-score')">作业提交情况对比</a>
                  <a href="#" @click="scrollToSection('#fluctuate-student')">作业空白情况对比</a>
              </li>
              <li>
                  <span>年级共性问题</span>
                  <a href="#" @click="scrollToSection('#fractional-distribution')" style="line-height:1.2">年级各班级知识点得分率</a>
                  <a href="#" @click="scrollToSection('#Two-point-five-rate')">年级各科高频错题</a>
              </li>
              <li>
                  <span>教育质量趋势</span>
                  <a href="#" @click="scrollToSection('#Homework-quality')">作业题量</a>
         href="#" @click="sc          <a href="#" @click="scrollToSection('#Test-knowledge-rate')" style="line-height:1.2;">知识点与改进情况图表</a>
                  <arollToSection('#Small-question-analysis')">图表数据</a>
              </li>
          </ul> -->
    </div>

  </div>
</template>

<script>
import ScoreOverview from './components/singleGrade/gradeOview.vue'
import ScoreDistribution from './components/singleGrade/gradecommonality.vue'
import HomeworkAnalysis from './components/singleGrade/edicationscore.vue'

export default {
  name: 'ScoreAnalysis',
  components: {
    ScoreOverview,
    ScoreDistribution,
    HomeworkAnalysis
  },
  data () {
    return {
      examId: '',
      classId: '',
      showComponents: false,
      isToolShowVisible: true,
      isFullscreen: false, // 当前是否处于全屏状态
      checkAll: false,
      checkedCities: [],
      cities: ['1', '2', '3', '4'],
      isIndeterminate: false,
      value1: '',
      options: [],
      value: '',
      title: '',
      subjectid: 0,
      gradeid: 0,
      classids: [],
      startTime: '',
      endTime: '',
      selectedItem: 'High-frequency-incorrect-questions',
      menuGroups: [
        {
          title: '年级总览',
          items: [
            { id: 'High-frequency-incorrect-questions', text: '年级五率对比' },
            { id: 'Homework-score', text: '作业提交情况对比' },
            // { id: 'fluctuate-student', text: '作业空白情况对比' }
          ]
        },
        {
          title: '年级共性问题',
          items: [
            { id: 'fractional-distribution', text: '年级各班级知识点得分率' },
            { id: 'Two-point-five-rate', text: '年级各科高频错题' }
          ]
        },
        {
          title: '教育质量趋势',
          items: [
            { id: 'Homework-quality', text: '作业质量' },
            { id: 'Test-knowledge-rate', text: '知识点与改进情况图表' },
            { id: 'Small-question-analysis', text: '图表数据' }
          ]
        }
      ],
    }
  },
  methods: {
    selectMenuItem (itemId) {
      this.selectedItem = itemId;
      // 这里可以添加你的滚动逻辑
      this.scrollToSection(`#${itemId}`);
    },
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    scrollToSection (selector) {
      this.$nextTick(() => {
        const target = document.querySelector(selector);
        if (target) {
          target.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动
        } else {
          console.warn(`Element with selector "${selector}" not found`);
        }
      });
    },
    handleLoadError (error) {
      this.$message.error(error.message || '加载数据失败')
    },
    toolhidden () {
      this.isToolShowVisible = !this.isToolShowVisible; // 切换抽屉状态
    },// 切换全屏
    toggleFullscreen () {
      if (!document.fullscreenEnabled) {
        alert("您的浏览器不支持全屏功能！");
        return;
      }

      if (this.isFullscreen) {
        // 退出全屏
        document.exitFullscreen();
        this.$refs.fullscreenElement.style.overflow = 'auto';
      } else {
        // 进入全屏
        this.$refs.fullscreenElement.requestFullscreen();
        this.$refs.fullscreenElement.style.overflow = 'auto';
      }
    },
    //进入讲评
    // addwebbard(){
    //     window.location.href=`https://wb.bsedu.com?examId=${this.$route.query.examId}&classId=${this.$route.query.classId}&title=${this.$route.query.title}`
    //     // window.open(`https://wb.bslmedu.com?examId=${this.$route.query.examId}&classId=${this.$route.query.classId}&title=${this.$route.query.title}`)
    // },
    // // 处理全屏状态变化
    handleFullscreenChange () {
      this.isFullscreen = !!document.fullscreenElement;
    }
  },
  mounted () {
    // 监听全屏状态变化
    document.onfullscreenchange = this.handleFullscreenChange;
    // 获取具体参数
    this.title = decodeURIComponent(this.$route.query.title || '')
    this.subjectid = Number(this.$route.query.subjectid) || 0
    this.gradeid = Number(this.$route.query.gradeid) || 0
    this.classids = (this.$route.query.classids || '').split(',').map(Number)
    this.startTime = this.$route.query.startTime || ''
    this.endTime = this.$route.query.endTime || ''
    console.info('ddd', this.startTime)
  }
}
</script>

<style scoped>
.searchbox {
  background: #fff;
  border-radius: 10px 10px 0 0;
  padding: 24px 24px 0;
  font-size: 14px;
}

.searchbox-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.searchbox-left>>>.el-input__inner {
  height: 35px;
  font-size: 12px;
}

.searchbox-left>>>.el-range-input {
  font-size: 12px;
}

.searchbox-left>>>.el-range-separator {
  height: 35px;
  width: 20px;
  font-size: 12px;
  line-height: 35px;
}

.searchbox-left>>>.el-input__icon {
  line-height: 35px;
}

.searchbox-left>>>.el-date-editor .el-range__icon {
  line-height: 30px;
}

.classboxcitybox {
  display: flex;
  align-items: center;
  padding-top: 10px;
}

.classboxcitybox>>>.el-checkbox__label {
  padding-left: 5px;
  font-size: 12px;
}

.classboxcitybox>>>.el-checkbox {
  margin-right: 15px;
}

.score-analysis {
  /* 移除原有内边距 */
  width: 100%;
  background: #F4F7FD;
  padding-bottom: 24px;
  scroll-margin-top: 20px;
}

.header {
  height: 48px;
  background: #4985FF;
  box-shadow: 0 2px 10px 0 #00000080;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background: #2379F6;
  font-size: 16px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

.header h3 {
  font-weight: normal;
  font-size: 16px;
}

.header p {
  display: flex;
}

.header p b {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 134px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  border: 1px solid #FFFFFF;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  margin-right: 14px;
  font-weight: normal;
}

.header p b img {
  width: 16px;
  margin-right: 8px;
}

.header p em {
  display: inline-block;
  width: 108px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 17px;
  border: 1px solid #FFFFFF;
  color: #2379F6;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  font-style: normal;
}

/* 固定在顶部的查询条件 */
.query-section.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
}

/* 内容区域添加上边距，避免被固定查询条件遮挡 */
.content-section {
  box-sizing: border-box;
  margin: 0px 140px 0;
  /* 根据查询条件的高度调整 */
}

.scoreStateTitle {
  font-size: 18px;
  color: #295CFF;
  line-height: 45px;
  margin: 0 140px;
  font-weight: bold;
  position: relative;
  padding-left: 25px;
}

.scoreStateTitle:after {
  content: '';
  width: 14px;
  height: 14px;
  opacity: 0.5;
  background: #295CFF;
  border-radius: 14px;
  position: absolute;
  left: 0;
  top: 15px;
}

.scoreStateTitle::before {
  content: '';
  width: 8px;
  height: 8px;
  opacity: 0.2;
  background: #295CFF;
  border-radius: 14px;
  position: absolute;
  left: 10px;
  top: 23px;
}

.query-section {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
}

.query-form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 适配移动端 */
@media screen and (max-width: 768px) {
  .query-form {
    flex-direction: column;
    align-items: stretch;
  }

  .el-form--inline .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .content-section {
    margin-top: 160px;
    /* 移动端查询条件可能会更高 */
  }
}

.leftbar {
  background: rgb(250, 251, 254);
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 0 0px 10px 0;
  position: absolute;
  left: 0;
  top: 14px;
  width: 130px;
  transition: transform 0.3s ease-in-out;
  /* 添加过渡效果 */
  transform: translateX(-100%);
  /* 默认隐藏 */
}

.toolshow-visible {
  transform: translateX(0);
  /* 显示 */
}

.leftbar li span,
.leftbar li a {
  display: block;
  border-bottom: 1px solid #F5F6F8;
  line-height: 32px;
  font-size: 12px;
  padding: 0 10px;
}

.leftbar li span {
  color: #2A303B;
  font-weight: bold;
}

.leftbar li a {
  color: #5B6371;
  text-decoration: none;
}

.leftbarcontent {
  position: fixed;
  left: 0;
  top: 60px;
}

.zdbutton {
  width: 130px;
  display: block;
  height: 14px;
  background: #ffffff url(../../assets/image/sq.png) no-repeat 110px center;
  background-size: 13px 13px;
  cursor: pointer;
  border-radius: 0 10px 0 0;
}

.leftbar a:hover {
  background-image: linear-gradient(90deg, #295cff24 0%, #ffffff00 100%);
  border-left: 3px solid #295CFF
}

.leftbar a.active {
  background-image: linear-gradient(90deg, #295cff24 0%, #ffffff00 100%);
  border-left: 3px solid #295CFF
}

.leftbar a.active:hover {
  background-image: linear-gradient(90deg, #295cff24 0%, #ffffff00 100%);
  border-left: 3px solid #295CFF
}

.zdbutton-visible {
  width: 130px;
  display: block;
  height: 14px;
  position: relative;
  background: #ffffff;
  cursor: pointer;
  border-radius: 010px 0 0;
}

.zdbutton-visible::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  width: 15px;
  height: 15px;
  background: url(../../assets/image/sq.png) no-repeat center;
  background-size: 13px 13px;
}
</style>
<style>
.el-table th {
  border-color: rgba(216, 228, 240, 1) !important;
}
</style>